<template>
    <div class="adult-register">

        <div class="appoint-top">
            <table class="table-common">
                <thead>
                <tr>
                    <th>接种者姓名</th>
                    <th>出生日期</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>接种证号</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{peopleInfo.name}}</td>
                    <td>{{peopleInfo.birthday}}</td>
                    <td>
                        <span v-if="peopleInfo.sex==true">女</span>
                        <span v-else>男</span>
                    </td>
                    <td>{{peopleInfo.realage}}</td>
                    <td>{{peopleInfo.serialnum?peopleInfo.serialnum:'-'}}</td>
                    <td>
                        <a @click="goInoculateHistory">
                            <span class="history-text">接种历史</span>
                            <img src="../../../static/images/right-arrow.png" class="right-arrow">
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="list-data">
            <div class="condition">
                <span class="label">接种类型</span>
                <Select v-model="formCustom.inoculatetype" class="common-select" style="width:260px">
                    <Option v-for="item in inoculateType" :value="item.value" >{{ item.label }}</Option>
                </Select>
            </div>
            <div class="table-vaccine">
                <div class="table-con">
                    <table>
                        <thead>
                        <tr>
                           <th>选择</th>
                            <th>疫苗名称</th>
                            <th>预约剂次/总剂次</th>
                            <th>接种疫苗</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                             <tr v-for="(item,index) in plans" :key="index">
                                 <td>
                                     <label class="check_label check_label-item ">
                                         <input type="checkbox" class=" publish_accredit-dot" disabled  ref="checkbox"  @click="secondVaccineChange(item,index)" />
                                         <span class="publish_accredit-dot-mark "></span>
                                     </label>
                                 </td>
                                 <td>{{item.vaccinename}}</td>
                                 <td>{{item.dose}}/{{item.totaldose}}</td>
                                 <td>
                                     <Button type="primary" @click="selectVenor(item,index)"  ref="isChooseBtn">选择</Button>
                                     <input type="hidden" value="" ref="vaccineid" class="vaccineid">
                                     <input type="hidden" :value="item.id" ref="planids"  class="planids">
                                 </td>
                                 <td>
                                     <Dropdown>
                                         <a href="javascript:void(0)">
                                             操作
                                             <Icon type="ios-arrow-down"></Icon>
                                         </a>
                                         <DropdownMenu slot="list">
                                             <DropdownItem @click.native="entry(item)">录入</DropdownItem>
                                             <DropdownItem @click.native="refuse(item,1)">拒种</DropdownItem>
                                             <DropdownItem @click.native="refuse(item,2)">禁忌</DropdownItem>
                                             <DropdownItem @click.native="refuse(item,3)">超期</DropdownItem>
                                             <DropdownItem @click.native="refuse(item,4)">替代</DropdownItem>
                                             <DropdownItem @click.native="refuse(item,5)">已患</DropdownItem>
                                         </DropdownMenu>
                                     </Dropdown>
                                 </td>
                             </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="btn-wrapper">
                <Button type="primary" @click="submit" :loading="loadingSubmit">提交信息</Button>
                <Button>取 消</Button>
            </div>
        </div>

        <!--录入-->
        <last-appoint-entry  :visible.sync="entryVisible" :entryInfo="entryInfo"  :babytype="1"></last-appoint-entry>

        <!--选择疫苗-->
        <vendor :visible.sync="vendorVisible" :vendorId="vendorId"
                :vaccineSelectType="vaccineSelectType" @vendorInfo="vendorInfo"></vendor>
    </div>
</template>

<script>
    import {planaudlt,refuseino,saveCommon} from '@/api/inoculate/inoculate';
    import lastAppointEntry from "./components/lastAppointEntry";
    import Vendor from "./components/vendor";

    export default {
        components: {
            Vendor,
            lastAppointEntry
        },
        data(){
            return {
                peopleInfo: {},
                inoculateType: [
                    {
                        value: 1,
                        label: '常规接种'
                    },
                    {
                        value: 2,
                        label: '强化接种'
                    },
                    {
                        value: 3,
                        label: '查漏补种'
                    },
                    {
                        value: 4,
                        label: '应急接种'
                    }
                ],
                loadingSubmit: false,
                plans: [],
                formCustom: {
                    id: '',
                    inoculatetype: 1,
                    peopleid: null,  // 儿童id
                    size: null,  // 选中疫苗计划个数
                    babytype: 1, // 儿童类型，儿童传0成人传1

                    changerid: null
                },

                entryVisible: false,
                entryInfo: {},

                vendorVisible: false,
                vendorId: null,
                vaccineSelectType: 0,

                selectVendorIndex: null,
            }
        },
        mounted () {
           this.getData();
        },
        computed: {
            peopleid () {
                return this.$route.query.peopleid;
            },
            id () {
                return this.$route.query.id;
            },
            turnId () {
                return this.$route.query.turnId;
            },
            changerid () {
                return this.$route.query.changerid;
            }
        },
        methods: {
            // 接种历史
            goInoculateHistory () {
                this.$router.push({path: '/home/inoculateHistoryAdult',query:{peopleid: this.peopleid,babyTypes:1}});
            },
            getData () {
                planaudlt({
                    peopleid: this.peopleid,
                    id: this.id
                }).then((res) => {
                    if (res.data.error == 0) {
                        this.peopleInfo = res.data.people;
                        this.plans = res.data.plans;
                    }
                });
            },
            vendorInfo (val) {
                this.$refs.vaccineid[this.selectVendorIndex].defaultValue = val.id;
                this.$refs.checkbox[this.selectVendorIndex].checked = true;
                this.$refs.checkbox[this.selectVendorIndex].disabled = false;
                this.$refs.isChooseBtn[this.selectVendorIndex].$el.innerText = '已选择';
            },
            // 点击表格复选框
            secondVaccineChange(item,index){
                if (this.$refs.checkbox[index].checked == false) {   // 取消选中
                    this.$refs.checkbox[index].disabled = true;
                    this.$refs.vaccineid[index].defaultValue = '';
                    this.$refs.isChooseBtn[index].$el.innerText = '选择';
                }
            },
            // 按钮选择
            selectVenor(val,index){
                this.selectVendorIndex=index;
                this.vendorVisible=true;
                this.vendorId=val.vaccinecoding;
            },
            // 录入
            entry(val){
                this.entryVisible=true;
                this.entryInfo=val;
            },
            // 其他操作
            refuse(val,status){
                refuseino({
                    peopleid: this.peopleInfo.id,
                    planid: val.id,
                    type: status,
                    babytype: 1
                }).then((res) => {
                    if (res.data.error==0){
                        this.getData();
                    }
                })
            },
            // 点击提交
            submit () {
                let that = this;
                this.loadingSubmit=true;
                this.formCustom.peopleid=Number(this.peopleid);
                this.formCustom.id=Number(this.turnId);

                var vaccineidArray=[];
                var planidArray= [];

                for(var i=0;i<this.$refs.checkbox.length;i++){
                    if(this.$refs.checkbox[i].checked == true){
                        vaccineidArray.push(this.$refs.vaccineid[i].defaultValue);
                        planidArray.push(this.$refs.planids[i].defaultValue);
                    }
                }

                this.formCustom.size=vaccineidArray.length;
                for(var i=1;i<vaccineidArray.length+1;i++){
                    this.formCustom['vaccineid'+i]=vaccineidArray[i-1];
                }
                for(var i=1;i<planidArray.length+1;i++){
                    this.formCustom['planid'+i]=planidArray[i-1];
                }


                if(this.changerid){
                    this.formCustom.changerid=Number(this.changerid);
                    let form =Object.assign(this.formCustom);
                    saveCommon(form).then((res)=>{
                        this.loadingSubmit=false;
                        if(res.data.error==0){
                            that.$Message.success({
                                content: res.data.message,
                                duration: 1,
                                onClose: function () {
                                    that.$router.push({path: 'registeredprocess'});
                                }
                            });
                        } else {
                            that.$Message.error(res.data.message);
                        }
                    });
                } else {
                    let form =Object.assign(this.formCustom);
                    delete form.changerid;
                    saveCommon(form).then((res) => {
                        this.loadingSubmit=false;
                        if (res.data.error==0) {
                            that.$Message.success({
                                content: res.data.message,
                                duration: 1,
                                onClose: function () {
                                    that.$router.push({path: 'registeredprocess'});
                                }
                            });
                        } else {
                            that.$Message.error(res.data.message);
                        }
                    });
                }

            }
        }
    }
</script>

<style lang="less">
    .adult-register{
        .appoint-top{
            background: #fff;
            padding:20px 10px;
            .right-arrow{
                width:12px;
                height: 12px;
            }
            .history-text{
                color:#EF7575;
                margin-right: 8px;
                cursor: pointer;
            }
        }
        .list-data{
            background: #fff;
            padding:20px 0;
            margin-top:20px;
            position: relative;
            .condition{
                border-bottom: 1px dashed #D2D2D2;
                padding-left:10px;
                .label{
                    font-size: 14px;
                }
            }
            .table-con{
                margin-bottom: 30px;
            }
            .btn-wrapper{
                position: fixed;
                width:98%;
                background: #fff;
                height: 50px;
                bottom: 0;
                text-align: center;
                padding-top:10px;
            }
        }
        .table-vaccine{
            margin-top:30px;
            .table-con{
                table{
                    width:100%;
                    text-align: center;
                    font-size: 14px;
                    border-collapse:collapse;
                    thead{
                        height:38px;
                        background:rgba(93,140,254,1);
                        font-size:14px;
                        font-family:PingFang-SC-Bold;
                        font-weight:bold;
                        color:rgba(255,255,255,1);
                        tr{
                            height:38px;
                            line-height: 38px;
                        }
                    }
                    tbody{
                        tr{
                            background:rgba(245,250,255,1);
                            td{
                                padding:15px 0;
                            }
                        }
                    }
                }
                .table-btn{
                    display: flex;
                    margin-top:10px;
                    .choose-vendor{
                        flex: 1;
                        background:rgba(93,140,254,1);
                        border-radius:6px;
                        color:rgba(255,255,255,1);
                        margin-right:12px;
                        font-size: 14px;
                    }
                    .btns{
                        .ivu-btn{
                            width:80px;
                            height: 38px;
                            background: #fff;
                            border:1px solid #5D8CFE;
                            color:#5D8CFE;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
</style>
